<!--
 * @Author: your name
 * @Date: 2017-08-27 00:47:41
 * @LastEditTime: 2019-10-24 15:12:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jqueryCntl\index.html
 -->
<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>简单实用的jQuery响应式垂直时间轴插件</title>
	<link rel="stylesheet" type="text/css" href="lib/cntl.css">

</head>
<body>
	<div class="jq22-container">	
		<div class="cntl">
			<span class="cntl-bar cntl-center">
				<span class="cntl-bar-fill"></span>
			</span>

			<div class="cntl-states">

				<div class="cntl-state">
					<div class="cntl-content">
						<h4>Title 1</h4>
						<p>Nullam congue ex diam, id tincidunt augue pellentesque ac. Phasellus ornare nulla tellus, suscipit finibus urna tincidunt non. Nunc fringilla consequat massa.</p>
					</div>
					<div class="cntl-icon cntl-center">'00</div>
				</div>


				<div class="cntl-state">
					<div class="cntl-content">
						<h4>Title 2</h4>
						<p>Mauris varius gravida ex, vitae efficitur leo. Quisque auctor pharetra velit, ac consectetur tellus congue a. Mauris ullamcorper nulla eu ex eleifend blandit. In vel tristique massa, vitae scelerisque dolor. Phasellus quis faucibus nibh. Integer molestie finibus justo vitae efficitur.<br><br>Fusce tincidunt leo velit. Nulla rhoncus condimentum nulla, quis porta dolor. Ut enim sapien, semper eget finibus at, interdum eget elit. Maecenas id est nisl. Pellentesque metus tortor, varius eget tempus non, congue ut sem. Vivamus id lacinia libero, quis ornare nibh.
						</p>
					</div>

					<div class="cntl-image"><img src="img/a1.png"></div>
					<div class="cntl-icon cntl-center">'03</div>
				</div>

				<div class="cntl-state">
					<div class="cntl-content">
						<h4>Title 3</h4>
						<p>Nulla ut tellus eu ante dapibus euismod ut sit amet est. Sed posuere scelerisque turpis, in bibendum magna feugiat non. Pellentesque ac tincidunt nibh. Nunc congue eu augue eu placerat. Nullam congue ex diam, id tincidunt augue pellentesque ac. Phasellus ornare nulla tellus, suscipit finibus urna tincidunt non. Nunc fringilla consequat massa.
						</p>
					</div>

					<div class="cntl-image"><img src="img/a2.png"></div>
					<div class="cntl-icon cntl-center">'04</div>
				</div>

				<div class="cntl-state">
					<div class="cntl-content">
						<h4>Title 4</h4>
						<p>Mauris varius gravida ex, vitae efficitur leo. Quisque auctor pharetra velit, ac consectetur tellus congue a. Mauris ullamcorper nulla eu ex eleifend blandit. In vel tristique massa, vitae scelerisque dolor. Phasellus quis faucibus nibh. Integer molestie finibus justo vitae efficitur.<br><br>Fusce tincidunt leo velit. Nulla rhoncus condimentum nulla, quis porta dolor. Ut enim sapien, semper eget finibus at, interdum eget elit. Maecenas id est nisl. Pellentesque metus tortor, varius eget tempus non, congue ut sem. Vivamus id lacinia libero, quis ornare nibh.
						</p>
					</div>

					<div class="cntl-image"><img src="img/a3.png"></div>
					<div class="cntl-icon cntl-center">'07</div>
				</div>

				<div class="cntl-state">
					<div class="cntl-content">
						<h4>Title 5</h4>
						<p>Nulla ut tellus eu ante dapibus euismod ut sit amet est. Sed posuere scelerisque turpis, in bibendum magna feugiat non. Pellentesque ac tincidunt nibh. Nunc congue eu augue eu placerat. Nullam congue ex diam, id tincidunt augue pellentesque ac. Phasellus ornare nulla tellus, suscipit finibus urna tincidunt non. Nunc fringilla consequat massa.
						</p>
					</div>

					<div class="cntl-image"><img src="img/a4.png"></div>
					<div class="cntl-icon cntl-center">'10</div>
				</div>
			</div>
		</div>
	
	</div>
	
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="lib/jquery.cntl.js"></script>
	<script type="text/javascript">
		$(document).ready(function(e){
			$('.cntl').cntl({
				revealbefore: 300,
				anim_class: 'cntl-animate',
				onreveal: function(e){
					console.log(e);
				}
			});
		});
	</script>
</body>
</html>